<template>
	<zui-box>
		
	<!-- 	//复购没有手续费 module_id -->
		
		<!-- 头部导航 -->
		<view class="navbar">
			<u-navbar :fixed="true" title=" " leftIconColor='#fff' @leftClick="xz_back" bgColor="rgba(0,0,0,0.5)"
				title-color="white">
				<view class="title" slot="center">
					<!-- 搜索框 -->
					<view class="search_box">
						<u-search shape="round" bgColor='#fff' placeholder='请输入搜索商品' bg-color='#F1F6FE' :disabled='true'
							:showAction="false" @click="go_search()"></u-search>
					</view>
				</view>
			</u-navbar>
		</view>

		<!-- 轮播图 -->
		<view class='banner'>
			<u-swiper bgColor='transparent' :list="banner" keyName="img" circular height="840rpx" radius='0'
				wigth="750rpx"></u-swiper>
		</view>

		<!--  -->
		<view class="text_box">
			<view class="price_box">
				<view class="price">
					<view class="currency">¥</view>
					<view class="leftPrice">{{ priceInt(info.goods_price*1) }}</view>
					<view class="rightPrice">.{{ priceDecimal(info.goods_price*1) }} </view>
				</view>
			</view>
			<view class="title_box u-line-1">
				{{info.goods_name}}
			</view>
			<view class="text_spec">
				<view class="left">
					<view class="item">
						<!-- 重量:{{info.goods_weight}}g -->
					</view>
					<view class="item" v-if="module_id!=4">
					<!-- 	手工费:{{info.process_fee}}元/克 -->
					</view>
				</view>
				<view class="right">
					销量:{{info.goods_sales}}件
				</view>
			</view>
		</view>

		<view class="gtitle">
			<view>
				<view></view>
			</view>
			<text>宝贝详情</text>
			<view>
				<view></view>
			</view>
		</view>

		<!-- 添加富文本 -->
		<!-- <rich-text :nodes="goods.content"></rich-text> -->
		<view class="my_html">
			<mp-html :content="info.goods_desc" />

			<u-gap height="200rpx"></u-gap>

		</view>

		<zui-foot bgColor='#fff'>
			<u-gap height="30rpx"></u-gap>
			<view class="buttom">
				<view class="buttom_icon">
					<view class="kefu" @click="xz_go('service')">
						<view>
							<image src="../../static/img/kefu.png"></image>
							<text>客服</text>
						</view>
					</view>
				</view>
				<view class="btn_arr">
					<button class="btn" @click="add_fun()">加入购物车</button>
					<button class="btn" @click="buy_fun()">立即购买</button>
				</view>
				<!-- <view class="btn_one" v-else>
					<button class="btn" >该商品已售空</button>
				</view> -->
			</view>
			<u-gap height="30rpx"></u-gap>
		</zui-foot>


		<!-- 商品规格弹出层 -->

		<u-popup :show="show" mode="bottom" :closeable="true" @close="close">
			<view class="good_pop">

				<!-- //商品盒子 -->
				<view class="good_box">
					<!-- 商品图片 -->
					<view class="good_img">
						<image :src="info.goods_thumb"></image>
					</view>
					<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
					<view class="title_wrap">
						<view class="title u-line-1">{{info.goods_name}}</view>

						<view class="price">
							¥
							<text class="large">{{ priceInt(info.goods_price*1) }}</text>
							.{{ priceDecimal(info.goods_price*1) }}
						</view>
					</view>
				</view>


				<u-gap height="30rpx"></u-gap>



				<!--规格设置成可以滚动的避免撑爆页面 -->
				<view class="scroll_box">
					<scroll-view class="scroll" scroll-y="true">
						<view class="goods_spec" v-for="(items,indexs) in info.goods_attr_key" :key="indexs">
							<view class="name">{{ items.attr_name }}</view>
							<view class="attr" v-if="specs_arr.length>0">
								<text v-for="(item,index) in items.goods_attr_value" :key='index'
									:class="specs_arr[indexs] == item.id ? 'choice' : ''" @click="opt(indexs,item.id)">
									{{ item.attr_value }}
								</text>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="number">

					<view class="text">
						数量
					</view>

					<view class="number_box">
						<u-number-box v-model="number" bgColor='#f1f1f1' inputWidth='50rpx' :min="1" max="999"
							:disabledInput="true" >
							<!-- <text slot="input" style="color:#fff; width: 50px;text-align: center;" class="input">
								{{number}}
							</text> -->

						</u-number-box>
					</view>
				</view>
			</view>


			<u-gap height="50rpx"></u-gap>


			<!-- <zui-button color='yellow'  @fun='save'>加入购物车</zui-button> -->

			<view class="btn_box">
				<button @click="do_add" class="add" v-if="add_buy_type==1">加入购物车</button>
				<button @click="do_buy" class="buy" v-else>购买</button>
			</view>



			<!-- 	<button  :disabled="disabled"@click="Judge">加入购物车</button> -->
			<!-- <button type="default" :class="status == 1 ? 'add' : 'buy'" :disabled="disabled"
					@click="Judge">立即购买</button> -->


		</u-popup>



	</zui-box>
</template>

<script>
	export default {
		data() {
			return {
				the_id: '', //id
				banner: [], //轮播图
				info: '', //详情信息
				specs_arr: [], //规格 
				number: 1, //数量
				add_buy_type: 1, //判断是 加入购物车还是直接购买
				disabled: false,
				show: false, //弹出层
				have_address: false, //是否有地址
				status: 1,
				specs_id:'',
				module_id:'',//模块id

			};
		},
		computed: {

			// 价格整数
			priceInt() {
				return val => {
					let priceStr = val.toString();
					if (priceStr != parseInt(priceStr)) {
						return priceStr.split('.')[0];
					} else {
						return priceStr;
					}
				};
			},
			// 价格小数
			priceDecimal() {
				return val => {
					let priceStr = val.toString();
					if (priceStr != parseInt(priceStr)) {
						return priceStr.split('.')[1];
					} else {
						return '00';
					}
				};
			}
		},
		//页面加载完毕
		onLoad(e) {
			console.log(e);
			this.the_id = e.id;
			console.log('获取的id', this.the_id);

		},
		//每次进入页面
		onShow() {
			//获取接口
			this.step();
		},
		methods: {
			step() {
				//获取详情信息
				this.get_info();
				//获取地址列表
				this.get_address();
			},
			
			
			//切换规格获取价格
			opt(indexs, id) {
				this.$set(this.specs_arr, indexs, id);
				console.log('规格化', this.specs_arr.join('-'))
			},
			//获取地址列表
						get_address() {
							uni.$u.http
								.get('app/address/list', {
									params: {},
									custom: {
										auth: true,
										toast: false,
										catch: false,
									}
								})
								.then(res => {
									console.log('获取地址列表', res);
									if (res.length > 0) {
										this.have_address = true; //追加新数据
									} else {
										this.have_address = false; //追加新数据
									}
								})
								.catch(res => {
									
								});
						},


			get_info() {

				// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
				uni.$u.http.get('/app/integral/detail', {
					params: {
						id: this.the_id,
					},
					custom: {
						auth: true,
						toast: false,
						catch: false,
					},
				}).then(res => {
					console.log('获取分类', res);
					this.banner = res.goods_img;
					this.info = res;
					this.module_id=res.module_id;
					// this.specs_arr.length = this.info.goods_attr_key.length();
					// console.log('现在的数据是',this.info.goods_attr_key)

					// 初始化
					let specs_arr = [];
					let str = '';
					this.info.goods_attr_key.forEach((item) => {
						specs_arr.push(str);
					})
					this.specs_arr = specs_arr;

				}).catch(err => {

				})

			},
			//加入购物车操作
			do_add() {
				let specs_ok = this.specs_arr.includes('')
				console.log(specs_ok)
				if (specs_ok) {
					return this.say('请选择规格');
				}

				//获取规格id
				let specs_str = this.specs_arr.join('-');
				let goods_specs = this.info.goods_specs;
				let specs_id = goods_specs.find(x => x.goods_path == specs_str).id;
				this.specs_id =specs_id;

				// /app/cart/add
				uni.$u.http.post('/app/cart/add', {
						specs_id: specs_id,
						goods_num: this.number,
						type: 'integral'

					}, {
						custom: {
							auth: true,
							toast: true,
							catch: true,
						}
					}

				).then(res => {
					//加入购物车成功
					this.say('加入购物车成功')
					this.show = false;
				}).catch(err => {})

			},
			do_buy() {

				let specs_ok = this.specs_arr.includes('')
				console.log(specs_ok)
				if (specs_ok) {
					return this.say('请选择规格');
				}

				//获取规格id
				let specs_str = this.specs_arr.join('-');
				let goods_specs = this.info.goods_specs;
				let specs_id = goods_specs.find(x => x.goods_path == specs_str).id;
				let number = this.number;
				let specs_field = specs_id +',' +number;

				uni.navigateTo({
					url: '/pages/integral/confirm?specs_field='+specs_field
				});

			},
			add_fun() {
				console.log('加入购物车')
				if (!this.have_address) {
				
									this.show = false;
									// return this.say('请选择规格');
									var that = this;
									uni.showModal({
										title: '设置默认地址',
										content: '您需要先绑定默认地址',
										success: function(res) {
											if (res.confirm) {
												console.log('用户点击确定');
												that.xz_go('address_list');
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									});
								}else{
									this.add_buy_type = 1;
									this.show = true;
								}

				
			},
			buy_fun() {
				console.log('购买')
				if (!this.have_address) {
				
									this.show = false;
									// return this.say('请选择规格');
									var that = this;
									uni.showModal({
										title: '设置默认地址',
										content: '您需要先绑定默认地址',
										success: function(res) {
											if (res.confirm) {
												console.log('用户点击确定');
												that.xz_go('address_opt');
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									});
								}else{
									this.add_buy_type = 2;
									this.show = true;
								}
				
			},
			close() {
				//关闭弹出层
				this.show = false;
			},
			
			go_search(){
				uni.navigateTo({ url: '/pages/integral/search'});
			},

		}
	}
</script>

<style lang='scss' scoped>
	/deep/.zui-foot{
		padding: 30rpx !important;
	}
	.btn_box {
		uni-button {
			border-radius: 0 !important;
		}

		uni-button:after {
			border: 0;
		}

		.buy {
			background: #AA334F;
			border-radius: 0;
			color: #FFFFFF;
			font-size: 34rpx;
		}

		.add {

			background: #AA334F;
			border-radius: 0;
			color: #FFFFFF;
			font-size: 34rpx;
		}
	}

	/* //富文本图片去除间隔 */
	.my_html {
		color: #333333;

		/deep/image {
			vertical-align: bottom !important;
		}
	}


	/* //假搜索 */
	.search_box {
		width: 600rpx;
		margin: 0 auto;
		border-radius: 4rpx;
		display: flex;
		align-items: center;
		padding: 30rpx 30rpx;
		box-sizing: border-box;
	}

	/* //轮播图 */
	.banner {
		/deep/.u-swiper__wrapper__item__wrapper {

			width: 750rpx !important;
			height: 840rpx;
			margin: 0 auto !important;
			overflow: hidden;
		}
	}

	.text_box {
		padding: 30rpx ;
		box-sizing: border-box;
		width: 750rpx;
		height: 280rpx;
		background: #fff;

		.price_box {
			font-size: 100rpx;
			font-size: 30rpx;
			position: relative;

			.price {
				align-items: center;
				display: flex;
				color: #E63A2A;

				.currency {
					font-size: 30rpx;
					position: relative;
					top: 10rpx;
					line-height: 100rpx;
				}

				.leftPrice {
					line-height: 100rpx;
					font-size: 56rpx;
					font-weight: 500;
				}

				.rightPrice {
					line-height: 100rpx;
					font-size: 35rpx;
					position: relative;
					top: 10rpx;
				}
			}
		}

		.title_box {
			font-size: 36rpx;
			color: #333333;
			margin-bottom: 38rpx;
		}

		.text_spec {
			display: flex;
			justify-content: space-between;
			color: #91929C;
			font-size: 24rpx;

			.left {
				display: flex;

				.item {
					margin-right: 30rpx;
				}
			}

			.right {}
		}

	}

	.gtitle {
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;

		view {
			position: relative;

			&>view:nth-of-type(1) {
				width: 70rpx;
				height: 6rpx;
				background-color: #999999;
				border-radius: 198rpx;
			}
		}

		text {
			margin: 0 20rpx;
			color: #999999;
			font-size: 30rpx;
			font-weight: bold;

		}
	}



	.buttom {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		width: 100%;

		.buttom_icon {
			display: flex;

			.kefu {
				display: flex;
				width: 80rpx;
				flex-wrap: wrap;
				justify-content: center;

				view {
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				image {
					width: 38rpx;
					height: 38rpx;
				}

				text {
					text-align: center;
					width: 80rpx;
					margin-top: 10rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #666666;

				}
			}


		}




		.btn_arr {

			display: flex;
			flex-direction: row;

			button {
				padding: 20rpx 50rpx 20rpx 50rpx;
				display: inline-block;
				margin: 0;
				background-color: #AA334F;
				color: #FFFFFF;
				font-size: 30rpx;
				font-weight: 400;
				line-height: 1.5;
			}

			button:nth-of-type(1) {
				border-radius: 198rpx 0rpx 0rpx 198rpx;
				background: #AA334F;
			}

			button:nth-of-type(2) {

				border-radius: 0rpx 198rpx 198rpx 0rpx;
			}


			width: 480rpx;

			.btn {
				width: 240rpx;
				padding: 0 !important;
				height: 80rpx;
				line-height: 80rpx !important;
			}

			.btn_quan {
				border-radius: 198rpx !important;
				width: 480rpx;
				background-color: #E63A2A !important;
			}
		}
		
		.btn_one{
			display: flex;
			flex-direction: row;
			
			button {
				border-radius: 50rpx;
				width: 500rpx;
				padding: 20rpx 50rpx 20rpx 50rpx;
				display: inline-block;
				margin: 0;
				background-color: #232539;
				color: #FFFFFF;
				font-size: 30rpx;
				font-weight: 400;
				line-height: 1.5;
			}
			
		}
	}


	/* //商品数量 */
	.number {

		display: flex;
		justify-content: space-between;

		.text {
			font-size: 28rpx;
			font-weight: bold;
			color: #3D444D;
		}

		/* //步进器 盒子 */
		.number_box {
			/deep/.u-number-box__minus {
				width: 34rpx !important;
				height: 34rpx !important;
				border: 1px solid #fff !important;
				border-radius: 4rpx;

				.u-icon__icon {
					font-size: 24rpx !important;
					color: #fff !important;
				}
			}

			/deep/.u-number-box__minus--hover {
				background: transparent !important;
				border: 1px solid #666 !important;

				.u-icon__icon {
					font-size: 24rpx !important;
					color: #666 !important;
				}
			}

			/deep/.u-number-box__minus--disabled {
				background: transparent !important;
				border: 1px solid #666 !important;

				.u-icon__icon {
					font-size: 24rpx !important;
					color: #666 !important;
				}
			}

			/deep/.u-number-box__input {
				color: #999999 !important;
			}

			/deep/.u-number-box__input--disabled {
				color: #999999 !important;
			}

			/deep/.u-number-box__plus {
				width: 34rpx !important;
				height: 34rpx !important;
				border: 1px solid #fff !important;
				border-radius: 4rpx;

				.u-icon__icon {
					font-size: 24rpx !important;
					color: #fff !important;
				}
			}

			/deep/.u-number-box__plus--hover {
				background: transparent !important;
				border: 1px solid #666 !important;

				.u-icon__icon {
					font-size: 24rpx !important;
					color: #666 !important;
				}
			}

			/deep/.u-number-box__plus--disabled {
				background: transparent !important;
				border: 1px solid #666 !important;

				.u-icon__icon {
					font-size: 24rpx !important;
					color: #666 !important;
				}
			}
		}


	}




	/* 弹出层 */

	/* /deep/.u-popup__content {
		background: #0C0D21 !important;
	}
 */
	/* //商品规格 */
	.good_pop {
		padding: 30rpx 30rpx 0 30rpx;

		.goods {
			display: flex;
			margin-bottom: 60rpx;

			image {
				width: 184rpx;
				height: 184rpx;
				margin-right: 30rpx;
			}

			view {
				text {
					display: block;
				}

				&>text:nth-of-type(1) {
					margin-top: 78rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #D12324;
				}

				&>text:nth-of-type(2) {
					margin-top: 10rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #999999;
					text-decoration: line-through;
				}
			}
		}

		.scroll_box {
			color: #fff;

			.scroll {
				height: 400rpx;

			}
		}

		.goods_spec {
			margin-bottom: 40rpx;

			.name {
				font-size: 28rpx;
				font-weight: bold;
				color: #9D97A7;
			}

			.attr {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #9D97A7;

				text {
					display: inline-block;
					padding: 8rpx 48rpx;
					background: #ececec;
					border-radius: 36px;
					margin-right: 30rpx;
					border: 2rpx solid #ececec;
					margin-bottom: 30rpx;
				}

				.choice {
					border: 2rpx solid #AA334F;
					background: #AA334F;
					color: #fff;
				}


			}


		}


	}




	/* 	//商品盒子 */
	.good_box {
		display: flex;
		justify-content: flex-start;

		.good_img {
			width: 184rpx;
			height: 184rpx;
			border-radius: 12rpx;
			overflow: hidden;
			margin-right: 36rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.title_wrap {
			padding: 10rpx 0;
			width: 440rpx;
			display: flex;
			flex-flow: column;
			justify-content: space-between;

			.title {
				text-align: left;
				font-size: 30rpx;
				color: #666666;
				line-height: 46rpx;
			}

			.price {
				font-size: 26rpx;
				color: #E63A2A;

				.large {
					margin-left: 6rpx;
					font-size: 32rpx;
				}
			}

			.clamp {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: block;
			}

		}
	}
</style>
